import React, { useEffect,useState} from "react";
import { _getSellerGroupList } from "./service";
import { Table, Tag, Space, Button } from 'antd';
import { Link } from "react-router-dom";
import { LeftOutlined } from '@ant-design/icons';

const Home: React.FC = () => {
    const [datasource, setDatasource] = useState<any>();
    const role =localStorage.getItem('role')
    useEffect(() => {
        const fetchData = async () => {
            await _getSellerGroupList().then((dataRes) => {
                dataRes.data.code ===200 && setDatasource(dataRes.data.data.list)
            })
        }
        (role === "1" || role === "2") && fetchData()
    }, [])

    const columns = [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '操作',
          key: 'action',
          render: (text, rowData) => (
            localStorage.getItem('role') === '2' &&
            <Space size="middle">
              <Link to={"/sellergrouptongji?id="+rowData.id}><Button type="primary">业绩统计</Button></Link>
              <Link to={"/seller"}><Button type="primary">销售列表</Button></Link>
            </Space>
          ),
        },
      ];
      
    return (
      <>
      <div className="header">
        <a className="goback" onClick={() => { window.history.back() }} ><LeftOutlined /></a>
        <div className="header-title">
        销售组业绩统计
        </div>
      </div>
      <Table columns={columns} dataSource={datasource} pagination={false} rowKey={'id'}/>
      </>
    )
}
export default Home;
